<template>
  <div id="main">
    <TopA></TopA>
<!--    <div class="fb-textarea" v-on:mouseover="addGood">-->
<!--      <div class="fb-textarea-adjustment">-->
<!--        <img src="static/加.png" class="add-img">-->
<!--      </div>-->
<!--    </div>-->
    <div class="left">
      <el-menu
        :default-active="value"
        unique-opened
        router
        class="el-menu-vertical-demo"
        :collapse="menu.isCollapse"
        style="height: 100%">
        <component
          class="menu-item"
          v-for="(item) in menu.navList"
          :key="item.title + item.url"
          :index="item.title"
          :route="{path: item.url, query: {value: item.title, flag: true}}"
          :is="(item.children && item.children.length > 0)?'el-submenu': 'el-menu-item'"
        >
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{item.title}}</span>
          </template>
          <template v-if="item.children && item.children.length > 0">
            <el-menu-item class="menu-item" v-for="(v,i) in item.children" :key="v.url+i" :index="v.title"
                          :route="{path: v.url, query: {value: v.title, flag: true}}"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">{{v.title}}</span>
            </el-menu-item>
          </template>
        </component>
      </el-menu>
    </div>
    <div class="middle">
      <div v-if="this.$route.query.value === '信息处理'" class="table-size">
        <el-row v-for="(item, index) in pagination.list.slice((pagination.currentPage-1) * pagination.rows, pagination.currentPage * pagination.rows)" :key="index + '@'" class="row-height">
          <el-col :span="6" v-for="(value, index) in item" :key="index + '!'">
            <good_seller :data="value" :dataInit="dataInit"></good_seller>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="2" :pull="2">
            <div class="adjustment-pag">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper"
                :current-page="pagination.currentPage"
                :page-size="pagination.rows"
                :total="pagination.list.length">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <history v-model:data="history"  v-if="this.$route.query.value === '历史商品'"></history>
      <frozen-goods v-model:data="frozenGoods" v-if="this.$route.query.value === '商品冻结'"></frozen-goods>
<!--      <custom-buy v-model:data="customBuy" v-if="this.$route.query.value === '购买人信息'"></custom-buy>-->
      <UserList v-model:data="customBuy" v-if="this.$route.query.value === '客户信息'"></UserList>
      <off-shelf v-model:data="frozenGoods" v-if="this.$route.query.value === '商品下架'"></off-shelf>
      <TypeManage v-model:data="allType" v-if="this.$route.query.value === '类别管理'" :getGoodsClass="getGoodsClass"></TypeManage>
      <UploadA v-if="this.$route.query.value === '发布商品'"></UploadA>
    </div>
    <template>
      <!--  弹窗-->
      <el-dialog
        title="发布商品"
        :visible.sync="dialogFormVisible"
        :destroy-on-close="true"
        append-to-body
      >
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.goodName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" :label-width="formLabelWidth">
            <el-input v-model="form.goodPrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品描述" :label-width="formLabelWidth">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上传图片" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="form.goodPicture"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!--  修改密码-->
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible_xg">
        <el-row>
          <el-col :span="24">
            <el-form :model="form">
              <el-form-item label="旧密码">
                <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="form.newPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码">
                <el-input v-model="form.reNewPwd"></el-input>
              </el-form-item>
            </el-form>
            <el-row class="adjustment-bottom-button" type="flex" justify="center">
              <el-col :span="12">
                <el-button>保存修改</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-dialog>
    </template>
    <el-drawer
      title="发布商品"
      :visible.sync="drawer"
      append-to-body="true"
      :with-header="false">
     <div class="drawer-adjustment">
       <div class="fb-title">
         <i class="el-icon-s-promotion"></i>
         <span>发布商品</span>
       </div>
       <el-row type="flex" justify="center" align="middle">
         <el-col :span="20">
           <el-form :model="form" class="form-adjustment" label-position="top" id="form-box">
             <el-row>
               <el-col :span="11">
                 <el-form-item label="商品名称" :label-width="formLabelWidth">
                   <el-input v-model="form.goodName" autocomplete="off" placeholder="请输入商品名称"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="11" :offset="2">
                 <el-form-item label="商品价格" :label-width="formLabelWidth">
                   <el-input v-model="form.goodPrice" autocomplete="off" placeholder="请输入商品价格"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="24">
                 <el-form-item label="商品种类" :label-width="formLabelWidth" id="cascader">
                   <el-cascader :props="type" style="width: 100%"></el-cascader>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-form-item label="商品描述" :label-width="formLabelWidth">
               <el-input
                 type="textarea"
                 :rows="5"
                 placeholder="请输入具体介绍"
                 maxlength="100"
                 show-word-limit
                 v-model="form.description">
               </el-input>
             </el-form-item>
             <el-form-item label="上传素材" :label-width="formLabelWidth">
               <el-upload
                 class="upload-demo"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 :file-list="form.goodPicture"
                 list-type="picture">
                 <el-button size="small" type="primary">点击上传</el-button>
               </el-upload>
             </el-form-item>
           </el-form>
           <el-row type="flex" align="middle" justify="center">
             <el-col :span="24">
               <el-button @click="drawer = false">发布商品</el-button>
             </el-col>
           </el-row>
         </el-col>
       </el-row>
     </div>
    </el-drawer>
  </div>
</template>

<script>
import good_seller from "./good_seller";
import frozenGoods from "./frozenGoods";
import history from "./history";
import customBuy from "./customBuy";
import TopA from "./TopA";
import UserList from "./UserList";
import OffShelf from "./offShelf";
import TypeManage from "./TypeManage";
import UploadA from "./UploadA";
var count = 1;
export default {
  name: "seller_home",
  components: {
    UploadA,
    TypeManage,
    OffShelf,
    TopA,
    good_seller, frozenGoods, history, customBuy, UserList
  },
  data() {
    return {
      sellerName: "亨亨",
      type: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      drawer: false,
      currentPath: this.$route.path,
      value: this.$route.query.value,
      menu: {
        isCollapse: false,
        navList: [{
          title: "信息处理",
          url: "/temp"
        }, {
          title: "客户总览",
          url: "11",
          children: [{
            title: "客户信息",
            url: "/temp",
          }]
        }, {
          title: "历史商品",
          url : "/temp"
        // }, {
        //   title: "购买人信息",
        //   url: "/temp"
        }, {
          title: "类别管理",
          url: "/temp"
        }, {
          title: "发布商品",
          url: "/temp"
        }]
    // {
    //   title: "商品状态",
    //     url: "12",
    //   children: [{
    //   title: "商品冻结",
    //   url: "/temp"
    // }, {
    //   title: "商品下架",
    //   url: "/temp"
    // }]
    // }
      },
      dialogFormVisible: false,
      dialogFormVisible_xg: false,
      form: {
        goodName: '',
        goodPrice: '',
        description: '',
        goodPicture: [],
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      },
      formLabelWidth: '80px',
      goodList: [],
      pagination : {
        currentPage: 1,
        rows: 2,
        list: []
      },
      frozenGoods: [],
      history: [],
      customBuy: [],
      allType: []
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      this.pagination.rows = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    handList: function () {
      this.pagination.list = this.goodList;
    },
    //更改数组格式
    changeFormat: function () {
      var result = []
      for (var i = 0, len = this.goodList.length; i < len; i += 4) {
        result.push(this.goodList.slice(i, i + 4))
      }
      // alert(result.length)
      this.pagination.list = result;
    },
    jump: function (value) {
      if (value) {

      }
    },
    back: function () {
      this.$router.push({
        path: '/home_A'
      })
    },
    addGood: function () {
      this.drawer = true;
    },
    getGoodsClass: function () {
      this.$api.good.getGoodsClass().then(res => {
        if (res.data.code === 200) {
          this.allType = res.data.data;
        }
      })
    },
    lazyLoad(node, resolve) {
      setTimeout(() => {
        let nodes = [];
        let level = node.level;
        if (level === 0) {
          this.$api.good.getParentClass().then(res => {
            if (res.data.code === 200) {
              console.log("1级目录", res);
              // nodes = Array.from(res.data.data).map(item => ({
              //   value: item.classId,
              //   label: item.className,
              //   leaf: false
              // }))
              res.data.data.forEach(item => {
                nodes.push({
                  value: item.classId,
                  label: item.className,
                  leaf: false,
                })
              })
              count = -1;
              resolve(nodes)
              console.log("nodes", nodes)
            }
          })
        } else {
          this.$api.good.getChildClass({
            classId: node.value
          }).then(res => {
            if (res.data.code === 200) {
              res.data.data.forEach(item => {
                nodes.push({
                  value: item.classId,
                  label: item.className,
                  leaf: true
                })
              })
              count = 1;
              resolve(nodes)
            }
          })
        }
        // nodes = [{'value': 1, 'label': 1, leaf: true}, {'value': 2, 'label': 2, leaf: true}]

      }, 1000)
    },
    getProvence: function (node, resolve) {

    },
    dataInit: function () {
      this.$api.good.getGoodsOnSale().then(res => {
        this.goodList = res.data.data;
        this.changeFormat();
        // console.log(this.goodList)
      })
      this.$api.good.getGoodsOnSale().then(res => {
        this.frozenGoods = res.data.data;
      })
      this.$api.good.getHisGoods().then(res => {
        this.history = res.data.data;
        // console.log(res)
      })
      this.$api.user.getBuyer().then(res => {
        this.customBuy = res.data;
      })
      this.getGoodsClass();
    }
  },
  created() {
    this.dataInit();
    // alert(this.$route.query.value)
  }
}
</script>

<style lang="scss" scoped>
#main {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%;
}
#cascader {
  >>> .el-cascader-node.in-active-path {
    color: rgba(176, 224, 230, 1);
  }
}
#form-box {
  >>> .el-textarea__inner {
    font-size: 24px;
    resize: none;
    border: 2px solid #C0C4CC;
  }
  >>> .el-textarea__inner::placeholder {
    font-size: 24px;
    color: #C0C4CC;
  }
  >>> .el-textarea__inner:focus {
    border: 2px solid rgba(176, 224, 230, 1);
  }
}
.left {
  position: fixed;
  width: 15%;
  height: 100%;
  top: 10%;
}
.row-height {
  /*width: 1000px;*/
  /*height: 400px;*/
}
.table-size {
  width: 100%;
}
.top {
  position: fixed;
  width: 100%;
  height: 10%;
  vertical-align: middle;
  background: rgba(176, 224, 230, 1);
}
.middle {
  position: relative;
  top: 18%;
  left: 18%;
  width: 70%;
  height: 100%;
  vertical-align: middle;
}
.adjustment-pag {
  float: right;
  padding-top: 30px;
}
#add {
  border: 2px dashed grey;
  border-radius: 10px;
  width: 250px;
  height: 300px;
  font-size: 90px;
  color: grey;
  position: relative;
  text-align: center;
  display: inline-block;
}
#add:hover {
  border: 2px dashed steelblue;
  color: steelblue;
  cursor: pointer;
}
.fb-textarea {
  background: white;
  border: 2px dashed #99eab7;
  width: 70px;
  height: 100%;
  position: fixed;
  right: 0;
}
.add-img {
  width: 50px;
  height: 50px;
}
.fb-textarea-adjustment {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.fb-title {
  font-weight: bold;
  font-size: 36px;
  height: 60px;
  color: rgba(28, 28, 28, 0.6);
  padding-left: 30px;
  background: rgba(176, 224, 230, 1);
  padding-top: 30px;
}
.drawer-adjustment {
  //padding-top: 100px;
}
.form-adjustment {
  padding-top: 30px;
}
>>> .el-input__inner {
  border-width: 2px;
}
>>> .el-col-6 {
  height: 330px;
}
>>> .el-menu-item.is-active {
  color: rgba(176, 224, 230, 1);
}
>>> .el-input__inner:hover {
  border-color: rgba(176, 224, 230, 1);
}
>>> .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  border-color: rgba(176, 224, 230, 1);
}
>>>.el-form-item__label {
  font-size: 24px;
  font-weight: 500;
  color: #7D7D7D;
}
>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgba(176, 224, 230, 1);
}
</style>
